<template>
    <div>
        <h2>生命周期 {{ count }}</h2>
        <button @click="count++">点击加1</button>
    </div>
</template>
<script setup lang="ts">
import { 
    ref,
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted,
    onActivated,
    onDeactivated,
    onErrorCaptured
} from 'vue'

const count = ref(0);

const props = defineProps({
    a: {
        type: String,
        defult: ""
    }
})

onBeforeMount(() => {
  console.log('onBeforeMount')
});

onMounted(() => {
  throw new Error('ghhhhh')  
  console.log('onMounted')
});

onActivated(() => {
  console.log('onActivated')
});

onBeforeUpdate(() => {
  console.log('onBeforeUpdate')
});

onUpdated(() => {
  console.log('onUpdated')
});

onBeforeUnmount(() => {
  console.log('onBeforeUnmount')
});

onUnmounted(() => {
  console.log('onUnmounted')
});
 
onDeactivated(() => { // 如果是缓存组件的话，onUnmounted 就不会调用
  console.log('onDeactivated')
});



</script>

<!-- <script>
    export default {
        data() {
            return {
              count: 0  
            }
        },
        setup() {
            console.log('setup')
        },
        beforeCreate() {
            console.log('beforeCreate')
        },
        created() {
            console.log('created')
        },
        beforeMount() {
            console.log('beforeMount')
        },
        mounted() {
            console.log('mounted')
        },
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('updated') 
        },
        beforeUnmount() {
            console.log('beforeUnmount')
        },
        unmounted() {
            console.log('unmounted')
        }
    }

</script> -->